<template>
	<view class="page-cont">
		<!-- <button @click="stream()">流式</button>
		<view class="container"  >
		
		
		<h-title title="画面分析结果(请截图保存,退出后将看不到此次结果)" color="#63065f" more-show="false"></h-title>
		    <zero-markdown-view :themeColor="'#63065f'" :markdown="overallResult"></zero-markdown-view>
		</view> -->
		
		
		
		<view v-if="status < RES_SHOWED" class="container">
			<!-- <uni-card :is-shadow="false" is-full>
				<text class="uni-h6">文件选择上传组件</text>
			</uni-card> -->
			
			
			
			<!-- <h-title title="作画并上传图片(上传完图片后请下拉页面填写信息后点击提交按钮)" color="#63065f" more-show="false"></h-title>
			   <zero-markdown-view :themeColor="'#63065f'" :markdown="example"></zero-markdown-view>
			 -->
			 <div style="display: flex; text-align: center;align-items: center;justify-content: center;height: 80rpx;">
				<a href="https://www.stepfun.com/"> 
				<image src="../../static/stepfun-logo.png" style="width: 286rpx;height: 120rpx;"></image>
				</a>
				<!-- <a href="https://www.stepfun.com/" style="font-size: 50rpx;font-weight: 1000;text-align: center;color: black;">阶跃星辰
				
				</a> -->
				<span style="color: darkgray;font-size: 38rpx;font-weight: 1000;margin-left: -20rpx;margin-top: -10rpx;">提供大模型支持</span>	
			 </div>
			 
			 
			<uni-section title= "介绍(请下拉页面以查看后续内容)"
			type="line" >

			<uni-collapse ref="collapse" v-model="value" @change="change">
				<uni-collapse-item title="🏡 什么是房树人绘画分析?(点此行折叠,展开)" >
					<view class="content">
						<text class="text2">{{introduction}}</text>
					</view>
				</uni-collapse-item>
				
				
				
				
			</uni-collapse>


			<uni-collapse ref="collapse2" v-model="value" @change="change">
				
				<uni-collapse-item title="🎨 房树人测验需要怎么做？(点此行折叠,展开)" >
					<view class="content">
						<text class="text2">{{demand}}</text>
					</view>
				</uni-collapse-item>
				
				
			</uni-collapse>
			
			
			
			<uni-section title= "作画并上传图片(上传完图片后请下拉页面填写信息后点击提交按钮)"
			type="line">
			</uni-section>
				<view class="example-body">
					<uni-file-picker 
					ref="files"
					limit="1" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					title="请选择一张图片" :source-type="sourceType"></uni-file-picker>
				</view>
		
				<view class="example">
					<!-- 基础用法，不包含校验规则 -->
					<uni-section  title="补充信息" type="line"></uni-section>
					<uni-forms ref="picInfoForm" :model="picInfos" labelWidth="80px" :label-position="alignment">
			
						<uni-forms-item label="画作名字">
							<uni-easyinput v-model="picInfos.img_name" placeholder="给作品取个名字吧!ヽ(｡･ω･｡)ﾉ" />
						</uni-forms-item>
						
						<uni-forms-item label="作画顺序">
							<uni-easyinput type="textarea" v-model="picInfos.sequence" placeholder="请填写您的作画顺序" />
						</uni-forms-item>
						
						<uni-forms-item label="您的年龄">
							<uni-easyinput v-model="picInfos.age" placeholder="请填写您本人的年龄" />
						</uni-forms-item>
						
						<uni-forms-item label="您的性别">
							<uni-easyinput v-model="picInfos.gender" placeholder="请填写您本人的性别" />
						</uni-forms-item>
						
						<uni-forms-item label="您的职业">
							<uni-easyinput v-model="picInfos.job" placeholder="请填写您本人的职业" />
						</uni-forms-item>
						
						<uni-forms-item label="作画时间(单位:分钟)">
							<uni-easyinput v-model="picInfos.time" placeholder="请填写作画时间(如未超时可不填)" />
						</uni-forms-item>
						
						<uni-forms-item label="补充描述画面内容(选填)">
							<uni-easyinput type="textarea" v-model="picInfos.content" placeholder="可以选择性地补充一下画面内容" maxlength="-1"/>
						</uni-forms-item>
						
						
						
					</uni-forms>
				</view>
			</uni-section>
			
			</uni-section>
		
			<uni-section title="分析结果" type="line" >
				
			</uni-section>
			<view class="result">
				<text>{{result}}</text>
				<view class="admin-info" v-if="failFlag === 1 || contactFlag === 1">
					<image  src="../../static/adminQRcode.png"></image>
					<br/>
					<text>{{wechatInfo}}</text>
				</view>
				
			</view>
			
			
		</view>
		
		
		<view v-if="status >= RES_SHOWED" id="result-area">
			<view class="container"  >
			
			
			<h-title title="角色卡" color="#63065f" more-show=false></h-title>
			
			        <!-- 默认用法 直接传入md文本即可-->
			    <zero-markdown-view :themeColor="'#63065f'" :markdown="overallResult"></zero-markdown-view>
			</view>
			<view class="container"  >
			
			
			<h-title title="画面分析结果" color="#63065f" more-show=false></h-title>
				
			        <!-- 默认用法 直接传入md文本即可-->
			    <zero-markdown-view :themeColor="'#63065f'" :markdown="result"></zero-markdown-view>
			</view>
		</view>
		
		<view class="container" v-if="status >= RES_SHOWED" >
		
		
		<h-title title="保存结果(请在全部结果生成之后再次点击以下按钮)(可继续下滑页面点击按钮生成海报)" color="#63065f" more-show=false></h-title>
			<sp-html2canvas-render
			  domId="result-area"
			  ref="renderRef"
			  @renderOver="renderOver"
			></sp-html2canvas-render>
		    
			<button @click="cusRenderDom" class="screen-shot-btn">
				<text class="info-text">
					导出截屏（生成截屏后请长按保存）
				</text>
			</button>
			
			<image v-if="screenShotUrl != ''" class="screen-shot-img" :src="screenShotUrl" @click="previewImg(screenShotUrl)" :mode="imgDisplayMode"></image>
				
				
				<!-- 联系方式的部分（在结果展示页复制一份） -->
				<view class="admin-info" v-if="failFlag === 1 || contactFlag === 1">
					<image  src="../../static/adminQRcode.png"></image>
					<br/>
					<text>{{wechatInfo}}</text>
				</view>
				
		</view>
		
		
		<button v-if="status === IMG_UPLOADED" @click="analyse()" style="margin-top: 0rpx; " type = "primary">
			提交
		</button>
		
		<button  @click="contactUs()" style="margin-top: 0rpx; " type = "primary">
			我们是南京大学的心理学、人工智能博士团队，有任何想法欢迎随时点击此处联系我们、互相交流学习！（如果网站出问题了看不到结果也可以来找我们😵‍💫）
		</button>
		
		
		
		<button v-if="testMode === 1" @click="appendResult('12')">
			测试
		</button>
		
		<view class="posters-container" v-if="status >= RES_SHOWED" >
			
			<h-title title="生成海报" color="#63065f" more-show=false></h-title>
			
			<text v-if="status === RES_SHOWED">
				请等待全部结果生成完成
			</text>
		
			<my-poster v-if="status >= RES_EXPORTING" :personAttribute = "getPersonAttribute()">
			</my-poster>
			
		</view>	
			
	</view>

	
	
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	import poster from '@/components/poster.vue'
  import OpenAI from "openai";

  
	
	
	export default {
		// 组件选项
		  components: {
		    // 使用自定义标签名注册组件
		    'my-poster': poster
		  },
		  
		
		data() {
			
			return {
				testMode: 0,
				status:0,
				value:['0'],
				result:"结果会展示在这里(๑•̀ㅂ•́)و✧",
				imgDisplayMode:"aspectFit",
				overallResult:"请稍等～正在制作你的角色卡",
				introduction:`房树人测验（简称HTP）是在心理咨询和治疗中常用的心理投射测验，始于美国心理学家J.N.Buck的“画树测验”，于1948年发展为 “房树人测验”。

它是目前国际上比较标准的一套心理投射法测验。通过作画者所画的房子、树和人，可以了解其潜意识的心态、情绪、性格、人际交往状态、家庭关系情况、心理能量等等。透过房树人测验的可以投射出个人的心理状态，把潜意识释放出。从而去认识自己的动机、观感、见解及过往经历等，帮助自己了解事件的本质、自己对外界的接触取向及生活模式，作出合适的反应和调整。`,
				
				demand:`1.测试前的准备:准备铅笔、A4纸，橡皮（如果没有纸可用平板等电子设备进行绘画）。
2.要求:
(1)想怎么画就怎么画，但必须有房子、树、人。想添加什么都可以，不必在意自己画工好不好。
(2)自己想画但是画不出来的东西可以用文字标注（请确保字体工整、易辨别）
(3)画人的时候，不可以画火柴人、漫画人、尽量画自己。
(4)不可以借助尺子等工具画图，不可以临摹。
(5)作画时间20分钟，如果超时请备注
(6)画完请给画取个名字，备注作画顺序和你的年龄职业，详细描述画面内容`,

				example:`
				### part 1: 人物属性\n你是一位坚韧独立的内省者，经历过孤独与挑战，内心蕴藏不屈的生命力，正在人生的关键路口寻觅成长与突破。\n\n### part 2: 你的优势\n你拥有强大的内心世界，能够独立面对困境，并从中汲取力量继续前行。你对安全感的重视使你在不稳定环境中仍能保持内心的平和与稳定，擅长在逆境中为自己构建情感的避风港。你对细节的关注和深度的自我反思能力，让你在个人成长和职业发展上具备深刻的理解与洞察力，适合从事需要高度责任感、稳定性和深刻思考的职业，如心理咨询师、作家或战略规划师。\n\n### part 3: 小tips\n近期，你的情绪状态可能偏向单一和沉重，反映了一种内省但略显悲观的生活观。小贴士是，主动为生活注入新鲜元素，比如参与多彩的社交活动，探索新爱好，用创造性的方式表达自己，以此来平衡内心的沉闷，寻找更多正面情绪的出口。同时，考虑到内心的复杂性，不妨寻求专业的心理咨询支持，这将有助于你更深入地理解自己的情感，有效转化负面情绪，促进个人的全面成长与心灵的进一步绽放。
				`,
				example2:`
				从这张房树人测验的图片描述中，我们可以进行如下心理分析1.**光秃秃的大树**:通常代表个体的成长历程和自我形象。这棵树没有叶子，可能暗示着个体感到生命力的枯竭、缺乏活力或者处于一种消极的情绪状态。树枝向右弯曲成弧形，可能表示个体对外界的依赖或对他人影响的敏感性，也可能反映了内心的压抑或逃避倾向。2.**简陋破旧的房子**:房子通常代表个体的内心世界和安全感。破损的屋顶和裂缝的墙壁可能象征着个体心理防御机制的脆弱或存在严重的心理创伤。房子在画面的边缘，可能意味着个体感觉自己与外界隔离，或者在心理上与外部世界保持距离。3.**两个人物**:人物可能代表被测试者本人或其他重要的人物。一个穿裙子的人可能代表女性特质或柔弱的部分，而另一个未穿衣服的人可能反映了个体的原始自我或对自我暴露的恐惧。他们共同注视前方，可能表明个体对未知的焦虑或期待4.**荒凉孤独的场景**:整体画面的氛围可能反映了被测试者的内心感受，即孤独、无助，或者对生活环境的不满。这种情绪状态可能源于过去的负面经历，如家庭问题、社会压力或个人挫折。综合这些元素，被测试者可能有以下特点:经历过创伤或困难，内心感到孤独和无助，防御机制薄弱，可能有一定程度的自我否定或自我价值感低下。他们可能在寻求连接和理解，同时又害怕暴露真实的自我。建议专业心理咨询师进一步探索这些主题，以帮助个体处理潜在的心理问题并建立更健康的应对策略。
				`,
				alignment: 'top',
				sourceType: ['album', 'camera'],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'green',
						style: 'dashed',
						radius: 2
					}
				},
				picInfos:{
					img_id:0,
					file_name:"",//后端给文件的随机命名，用来区分图片
					img_name:"",//用户起的名字
					img_desc:"",//多模态大模型给出的图片详细描述
					sequence:"",//用户的作画顺序
					content:"",//用户对画作的内容的详细描述
					age:"",//用户的年龄
					gender:"",//用户的性别
					job:"",//用户的职业
					// description:"",
					
					time:""
				},
				INITIAL:0,
				IMG_UPLOADED:1,
				WAITING_RES:2,
				RES_SHOWED:3,
				RES_EXPORTING:4,
				failInfo:"请求超时，请重试或联系管理员微信：‘zjq570173331’(请截图保存微信号或下拉页面长按二维码添加),管理员会帮你得到结果",
				failFlag:0,
				contactInfo:"有任何想法欢迎随时联系我们！请在关闭该弹窗后下滑至页面底部查看微信号或长按二维码添加",
				contactFlag:0,
				wechatInfo:"请添加微信号：zjq570173331 \n  我们是南京大学的心理学、人工智能博士团队，有任何想法欢迎随时联系我们、互相交流学习！（如果网站出问题了看不到结果也可以来找我们😵‍💫）",
				screenShotUrl:'',
				
			}
		},
		onLoad() {
			console.log("load好")
		},
		mounted() {
			console.log("加载好");
			
				
		},
		methods: {
      select(e) {
        // this.status = INITIAL;


        console.log('选择文件：', e)
        console.log("文件" + e.tempFiles[0]);
        // console.log("文件base64编码在这："+ e.tempFilePaths[0]);

        // let file = e.tempFiles[0];
        //
        // let base64 = await this.load_image(e.tempFilePaths[0]);
        // console.log(base64);


        // this.result = "请等待15秒左右,您的图片正在被最顶尖的人工智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
        uni.uploadFile({
          url: server_url + '/only/upload/image', //仅为示例，非真实的接口地址
          filePath: e.tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: (uploadFileRes) => {
            let data = JSON.parse(uploadFileRes.data);
            // console.log(data.id);
            // console.log(uploadFileRes.data);
            // this.result = data.result;
            this.picInfos.file_name = data.filename
            // console.log(this.status);
            // console.log(this.IMG_UPLOADED);
            this.status = this.IMG_UPLOADED;
            // console.log(this.status);
            // console.log("这里"+this.picInfos.img_id)
          },
          fail: () => {

            this.result = this.failInfo;
            this.failFlag = 1;
            uni.showModal({
              title: '提示',
              content: this.failInfo,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });

          }

        });

      },


      // 加载图片到内存，仅演示。按需改成读文件等
      async  load_image(url) {
        let response = await fetch(url);
        let blob = await response.blob();
        let buffer = Buffer.from(await blob.arrayBuffer());
        return "data:" + blob.type + ';base64,' + buffer.toString('base64');
      },
			contactUs(){
				this.contactFlag = 1;
				uni.showModal({
					title: '欢迎联系我们！',
					content: this.contactInfo,
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			select_backup(e){	
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFiles[0]);
				//此处的好像不会看到
				this.result = "等待5到10秒左右应该就会开始看到结果开始一点点地呈现,期间请千万不要退出页面！如果超过20秒还没看到结果请换浏览器（目前测试下来夸克浏览器是有问题的，但是实在没找到解决方案😭）比如可以直接把网址,也就是:(以下两种均可)\nhtp-test.fun\nhttps://www.htp-test.fun\n复制后发到微信的文件传输助手中，直接点击它就可以进入该网页，如果着急或者还是有问题看不到结果的话可以点击下方的蓝色按钮联系我们，我来帮您快速出结果！请注意在看到结果后请截图保存，重新进入不会看到之前的结果";
				uni.uploadFile({
							url: server_url + '/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								this.result = data.result;
								// console.log("这里"+this.picInfos.img_id)
							},
							fail: (uploadFileRes) => {
								
								this.result = this.failInfo;
								this.failFlag = 1;
								uni.showModal({
									title: '提示',
									content: this.failInfo,
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							
							}
							
							
							
						});
				
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			getPersonAttribute() {
				const text = this.overallResult;
				// const text = this.example;
				// 使用正则表达式匹配"### part 1: 人物属性"和"### part 2:"之间的内容
				const regex = /### part 1: 人物属性([\s\S]*?)### part 2:/;
				const match = text.match(regex);
				
				if (match && match[1]) {
				  // match[1] 包含了匹配的组，即所需的文本
				  const extractedText = match[1].trim();
				  console.log(extractedText);
				  return extractedText;
				} else {
				  console.log("没有找到匹配的内容");
				  return text;
				}
			},
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			change(e) {
				console.log(e);
				this.current = e.detail.current
			},
			
			uploadImages(){
				this.$refs.files.upload()
			},
			
			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			back(){
				uni.navigateBack();
			},
			appendResult(s){
				this.result += s; 
				this.status = 112;
			},
			
			analyse(){
				
				if (this.picInfos.file_name === "") {
					console.log("未上传图片")
					this.result = "请上传图片并填写信息后再点击此按钮提交";
					return;
				}
				
				
				this.result = "等待5到10秒左右应该就会开始看到结果开始一点点地呈现,期间请千万不要退出页面！如果超过20秒还没看到结果请换浏览器（目前测试下来夸克浏览器是有问题的，但是实在没找到解决方案😭）比如可以直接把网址,也就是:(以下两种均可)\nhtp-test.fun\nhttps://www.htp-test.fun\n复制后发到微信的文件传输助手中，直接点击它就可以进入该网页，如果着急或者还是有问题看不到结果的话可以点击下方的蓝色按钮联系我们，我来帮您快速出结果！请注意在看到结果后请截图保存，重新进入不会看到之前的结果";
				this.status = this.WAITING_RES;
			
			
				uni.request({
				    url: server_url + "/analyse/img", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.picInfos.img_desc = res.data.result;
						this.status = this.RES_SHOWED;
						this.analyseImgDescStream();
						
					
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
				
				
				
				
				
				
			},
			analyseImgDesc(){
				
				
				uni.request({
				    url: server_url + "/analyse/img_desc", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						'img_desc':this.picInfos.img_desc,
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.result = res.data.result;
						this.status = this.RES_SHOWED;
						
						this.conclude();
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
				
				
				
			},
			analyseImgDescStream(){
				
				this.result = "等待5到10秒左右应该就会开始看到结果开始一点点地呈现,期间请千万不要退出页面！如果超过20秒还没看到结果请换浏览器（目前测试下来夸克浏览器是有问题的，但是实在没找到解决方案😭）比如可以直接把网址,也就是:(以下两种均可)<br>htp-test.fun<br>https://www.htp-test.fun<br>复制后发到微信的文件传输助手中，直接点击它就可以进入该网页，如果着急或者还是有问题看不到结果的话可以点击下方的蓝色按钮联系我们，我来帮您快速出结果！请注意在看到结果后请截图保存，重新进入不会看到之前的结果";
				
				fetch(server_url + '/analyse/img_desc/stream', {
				  method: 'POST',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  body: JSON.stringify({
				    'file_name': this.picInfos.file_name,
				    'img_name': this.picInfos.img_name,
				    'img_desc':this.picInfos.img_desc,
				    'sequence': this.picInfos.sequence,
				    'content': this.picInfos.content,
				    'age': this.picInfos.age,
				    'gender':this.picInfos.gender,
				    'job': this.picInfos.job,
				    'time': this.picInfos.time,
				  }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.result = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  this.concludeStream();
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
			},
			conclude() {
				uni.request({
				    url: server_url + "/conclude", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'content': this.result,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.overallResult = res.data.result;
					
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
			},
			concludeStream(){
				
				fetch(server_url + '/conclude/stream', {
				  method: 'POST',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  body: JSON.stringify({
				    'file_name': this.picInfos.file_name,
				    'content': this.result,
				  }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.overallResult = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  this.status = this.RES_EXPORTING;
				  this.saveTotalInfo();
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
			},
			saveTotalInfo(){
				
				
				uni.request({
				    url: server_url + "/total", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						'img_desc':this.picInfos.img_desc,
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
						'img_analyse': this.result,
						'personality_card': this.overallResult,
				    },
					// timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        
				    },
					fail:(res) => {
						
						
				
					}
				});
				
				
				
			},
			renderOver(e) {
			  // e为导出截图的base64格式文件
			  console.log('==== renderOver :', e)
			  this.screenShotUrl = e;
			  this.previewImg(this.screenShotUrl)
			},
			cusRenderDom() {
			  // 调用组件实例中h2cRenderDom方法
			  this.$refs.renderRef.h2cRenderDom()
			},
			//预览生成的海报图片
			previewImg(url) {
			    if (!url) return
				
			    uni.previewImage({
			        urls: [url]
			    })
			},
			
			stream(){
				
				
				
				fetch(server_url + '/stream', {
				  method: 'GET',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  // body: JSON.stringify({
				  //   // 你的请求体
				  // }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.overallResult = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  console.log("完整的！"+data);
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
				
				
			},
			
			complete(){
				this.updatePicInfo();
				this.back();
			}
		}
	}
</script>

<style lang="scss">
	
	
	
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		padding: 15px;
	}
	
	.text2 {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
	
	.screen-shot-btn {
		background-color: #63065f;
	}
	
	.info-text {
		color: white;
		font-size: 600;
		font-weight: 700;
	}
	
	// 轮播图

</style>
